<template>
	<view class="picture">
		<view class="picList" v-for="item in compositionList" :key="item.createTime" @click="bandPicList(item)">
			<view class="img">
				<image mode="aspectFill" :src="item.litpic" style="width: 100%;height: 100%;">
				</image>
			</view>
			<view class="titles">
				{{item.productionName}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendRequest
	} from '@/utils/quest.js';
	export default {
		data() {
			return {
				compositionList: []
			}
		},
		onLoad(options) {
			this.htmlurl = options.htmlurl;
			this.getColumnArticle();
		},
		methods: {
			getColumnArticle() {
				const url = '/' + this.htmlurl + '.html';
				const {
					limit,
					page
				} = this;
				const reqBody = {
					limit,
					page
				};
				this.loading = true;
				sendRequest(url, 'POST', reqBody).then(res => {
					const {
						code,
						data
					} = res.data;
					if (code === 0) {
						this.compositionList = data;
						this.videoObj = data[this.currentEpisode - 1] || data[0];
						this.currentEpisodeIndex = this.currentEpisode - 1;
					}
					this.loading = false;
				});
			},
			bandPicList(item) {
				console.log("item", item);
			}
		}
	}
</script>

<style scoped>
	.picture {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx;
		min-height: 800rpx;
		/* 或者根据实际情况调整 */
	}

	.picList {
		width: calc(50% - 8rpx);
		margin-bottom: 18rpx;
	}

	.picList .img {
		width: 100%;
		height: 343rpx;
	}

	.picList .img image {
		width: 100%;
		height: 343rpx;
	}

	.picList .titles {
		color: #FFF;
		padding: 12rpx 0 24rpx 0;
	}
</style>